<template>
  <div class="judge-center-wrapper">
    <el-card class="block-card">
      <el-table :data="submissions" class="only-bottom-border-table" style="width: 100%;" :show-header="true" :border="false">
        <el-table-column prop="id" label="#" width="100" />
        <el-table-column prop="problem" label="问题编号">
          <template slot-scope="scope">
            <a style="color:#13c2c2;" href="#">{{ scope.row.problem }}</a>
            <i class="el-icon-trophy" style="color:#bfa; margin:0 2px;" v-if="scope.row.trophy" />
            <span v-if="scope.row.extra">{{ scope.row.extra }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="用户名">
          <template slot-scope="scope">
            <a style="color:#13c2c2;" href="#">{{ scope.row.user }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="所有结果">
          <template slot-scope="scope">
            <span :style="resultStyle(scope.row.result)">{{ scope.row.result }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" width="80" />
        <el-table-column prop="memory" label="空间" width="100" />
        <el-table-column prop="lang" label="所有语言" width="120" />
        <el-table-column prop="date" label="提交时间" width="180" />
      </el-table>
      <div class="table-pagination">
        <el-pagination
          background
          layout="prev, next, sizes, total"
          :total="100"
          :page-size="10"
          :page-sizes="[10, 20, 50]"
          :current-page="1"
          style="margin-top: 16px;"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SubmissionsView',
  data() {
    return {
      submissions: [
        { id: 1479185, problem: '16594 🏆 3805 A (1)', user: '20242200322 高俊聪', result: '系统错误', time: '0MS', memory: '0MB', lang: 'C++17-O2', date: '2025-07-08 17:06:33' },
        { id: 1479184, problem: '16594 🏆 3805 A (1)', user: '20242200322 高俊聪', result: '系统错误', time: '0MS', memory: '0MB', lang: 'C++17-O2', date: '2025-07-08 17:02:08' },
        { id: 1479183, problem: '16594 🏆 3805 A (1)', user: '20242200322 高俊聪', result: '系统错误', time: '0MS', memory: '0MB', lang: 'C++17-O2', date: '2025-07-08 16:57:21' },
        { id: 1479182, problem: '16594 🏆 3805 A (1)', user: '20242200322 高俊聪', result: '系统错误', time: '0MS', memory: '0MB', lang: 'C++17-O2', date: '2025-07-08 16:55:50' },
        { id: 1479181, problem: '16595 🏆 3805 B (2)', user: '20242200327 斩题同', result: '正确', time: '3MS', memory: '6.94MB', lang: 'C++14', date: '2025-07-08 16:18:43' },
        { id: 1479180, problem: '16601 🏆 3805 H (8)', user: '斯思同', result: '正确', time: '188MS', memory: '11.7MB', lang: 'C++14', date: '2025-07-08 16:13:38' },
        { id: 1479179, problem: '16601 🏆 3805 H (8)', user: '20242200327 斩题同', result: '答案错误 (7%)', time: '223MS', memory: '6.94MB', lang: 'C++14', date: '2025-07-08 16:09:47' },
        { id: 1479174, problem: '1803 🏆 3985 B (2)', user: 'XLM2064 熊欣洋', result: '正确', time: '3MS', memory: '6.94MB', lang: 'C++14-O2', date: '2025-07-08 15:01:31' },
        { id: 1479173, problem: '1803 🏆 3985 B (2)', user: 'XLM2064 熊欣洋', result: '答案错误 (80%)', time: '3MS', memory: '6.94MB', lang: 'C++14-O2', date: '2025-07-08 15:00:32' },
        { id: 1479172, problem: '1803 🏆 3985 B (2)', user: 'XLM2064 熊欣洋', result: '答案错误 (30%)', time: '3MS', memory: '6.94MB', lang: 'C++14-O2', date: '2025-07-08 14:59:24' },
      ]
    }
  },
  methods: {
    resultStyle(result) {
      if (result.includes('正确')) return { color: '#13c213', fontWeight: 'bold' };
      if (result.includes('系统错误')) return { color: '#a020f0', fontWeight: 'bold' };
      if (result.includes('答案错误')) return { color: '#f5222d', fontWeight: 'bold' };
      return {};
    }
  }
}
</script>

<style scoped>
.judge-center-wrapper {
  margin: 0 auto;
  padding: 10px 0 24px 0;
}
.block-card {
  margin-bottom: 10px;
}
.only-bottom-border-table >>> .el-table__header-wrapper th {
  border-bottom: 1px solid #ebeef5 !important;
}
.only-bottom-border-table >>> .el-table__body-wrapper td {
  border-bottom: 1px solid #ebeef5 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.table-pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
</style> 